<!--
 * @Author: CJF
 * @Email: 1757818940@qq.com
 * @Date: 2022-02-28 15:14:37
 * @LastEditTime: 2022-03-02 08:56:47
 * @Description: 详情页
-->
<template>
  <div class="wrap" >
    <header>
      <van-icon name="arrow-left" class="back" @click="$router.back()"/>
      <div class="search">
        <img src="../../images/search.png" alt="" /><input type="text" />
      </div>
      <div class="btn">素材圈</div>
    </header>
    <main @scroll="scrollEvt">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        offset-top="50px"
        
      >
        <van-tab v-for="index in tab" :title="index.name" :key="index.id"    >
          <div v-if="index.name == '商品'" class="product" > 
            <van-swipe @change="onChange" style="height: 300px;"  :touchable="true">
              <van-swipe-item v-for=" item in list.photo" :key="item.id"> <img v-lazy="item.url" style="height: 100%;width:100%"/></van-swipe-item>
              <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{list.photo?list.photo.length:'0'}}</div>
              </template>
            </van-swipe>
            <div class="introduce">
                <div class="pricebox"><span class="price">{{list.price}}</span><span class="original">￥{{list.originPrice}}</span></div>
                <div class="title">{{list.title}}</div>
                <div class="mail"><div class="mailnum">累积热销<span>{{list.saleNum}}</span>件</div>
                     <div class="inventory">库存<span>{{Math.floor((Math.random()*9000+1000))}}</span>件</div>
                </div>
            </div>
            <div class="select">
                <div class="specifications"><div class="srtong"><strong>规格</strong><span>请选择规格[TH20210817规格]</span></div><i><van-icon name="weapp-nav" /></i></div>
                <div class="distribution"><div class="srtong"><strong>配送</strong><span>以下地区暂不支持配送：澳门特别行...</span></div><em @click="dialog()">查看详情</em></div>
                <div class="service">
                    <div class="srtong"><strong>服务</strong><span><i><van-icon name="passed" color="red" /></i>7天无理由退换货</span>
                <span><i><van-icon name="passed" color="red" /></i>品质保障</span><span><i><van-icon name="passed" color="red" /></i>偏远地区...</span></div><i><van-icon name="weapp-nav" /></i>
                </div>
            </div>
            <div class="evaluation">
                <div class="titles"><div class="usertit"><i></i><strong>用户评价(46)</strong></div><span><van-icon name="arrow" /></span></div>
                 <div class="label"><div class="btn">穿着舒服(4)</div><div class="btn">质量好(3)</div></div>
                 <div class="people">
                     <div class="head">  <div class="headimg"><img src="../../images/mine.png" alt=""></div><span>张*丰</span><van-icon v-for="index in 5"  name="star" :key="index" class="star"/></div>
                      <div class="date"><div class="time">{{time|dateFormat('YYYY-MM-DD hh:mm:ss')}}</div><span>35-38码（混色6双装）</span></div>
                      <div class="content">我喜欢</div>
                 </div>
            </div>
          </div>
          <div v-if="index.name == '详情'" class="xq">
            <div class="title"><span>———</span>&emsp;图文详情&emsp;<span>———</span></div>
            <div class="imgbox"><img :src="item.photo.url" alt="" v-for="item in list.descContentList" :key="item.photo.id"></div>
            <div class="buytips"><img src="../../images/tips.jpg" alt=""></div>
            <div class="hot">
              <div class="hottitle"><span>———</span>&emsp;为你推荐&emsp;<span>———</span></div>
              <div class="goodscon">
                <div class="item" v-for="item in hot " :key="item.id" @click="jump(item.id)" >
                  <div class="goodsimg"><img :src="item.image" alt=""></div>
                  <div class="cont">
                    <div class="goodstitle">{{item.title}}</div>
                  <div class="mail">累积热销{{item.saleNum}}万件</div>
                  <div class="hotprice"><span>￥</span>{{item.price}}</div>
                  <div class="originPrice"><span>￥</span>{{item.originPrice}}</div></div>
                </div>
               
                
               
              </div>
              <div class="loading" v-if="loading">加载中...</div>
                    <div class="loading" v-else-if="hasMore">下滑加载更多</div>
                    <div class="loading" v-else>都被你看光了</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </main>
    <footer> <div class="footernav">
              <span @click="$router.push('/home')">
                <van-icon name="wap-home-o"  class="icon"/>
                <p>首页</p>
              </span>
               <span @click="$router.push('shoppingcart')">
                <van-icon name="shopping-cart-o" class="icon" />
                <p>购物车</p>
              </span>
              <div :class="isAdd?'adddcart':'addactive' " @click="addcart()">{{cartext}}</div>
      </div></footer>
  </div>
</template>
<script>
import {detailsApi,hotsApi} from '../../apis/detailsApi'
export default {
  inject:['reload'],
  data() {
    return {
      tab: [
        { id: 1, name: "商品" },
        { id: 2, name: "详情" },
      ],
      active: 0,
      isShow: false,
      current: 0,
      num:0,
      oldtop:0,
      list:{},
      isAdd:true,
      cartext:'加入购物车',
      start:0,
      hot:[],
      loading:false,
      hasMore:true,
      onehot:[]
      // list:{id:'',price:'',saleNum:'',originPrice:'',title:'',descContentList:[],photo:[]}
    }
  },
 async created() {
    let id =this.$route.query.id||110207079
    let result =await detailsApi(id)
    let onelist = this.$store.getters['welfareah/getdoods']
    this.isAdd = onelist.every(it=>it.id!=id)
    if(!this.isAdd){
       this.cartext = '已加入购物车'
    }
    
    if(result.code===200){
      this.list={
        id:result.data.detail.id,
        price:result.data.detail.price,
        saleNum:result.data.detail.saleNum,
        originPrice:result.data.detail.originPrice,
        title:result.data.detail.title,
        descContentList:result.data.detail.descContentList,
        photo:result.data.detail.photo,
      }
     
    }else{
      console.log('请求失败，请重试')
    }
      this.getmore()
    
  },
  methods: {
    dialog(){
      this.$dialog.alert({
      title: '限制地区',
      message: '澳门特别行政区、台湾省、香港特别行政区、景洪市、阜康市、额敏县、塔城市、喀什地区、察布查尔锡伯自治县、鄯善县',
      confirmButtonText:'我知道了',
      closeOnClickOverlay:true,
   }).then(() => {
  // on close
   });
    },
   async getmore(){
    let res=await hotsApi(this.start)
     
      if(res.code===200){
         if(!res.data.isEnd){
            this.start+=res.data.perpage
            this.hot= this.hot.concat(res.data.list)
            this.hot=this.hot.concat(this.onehot)
            this.onehot = []
             if(this.hot.length%2!=0){
               this.onehot.push(this.hot[this.hot.length-1])//每次加载偶数
              this.hot.splice(this.hot.length-1,1)
         }
          this.hasMore=true
         }else{
           this.hasMore = false
            this.loading = false
         }
         
      }else{
        console('获取更多失败')
      }
        setTimeout(() => {
                    this.loading = false //等页面渲染完成再赋值
                })
   },

    jump(id){
      this.$router.push({path:'/details',query:{id}})
      this.reload()
    },
    scrollEvt(evt) {
    
       let vant_wrap =document.querySelector('.van-tabs__wrap')
      if (evt.target.scrollTop-this.oldtop>0) {
        if(this.num<1){
          this.num+=0.02 
           vant_wrap.style.opacity=`${this.num}`
            this.oldtop=evt.target.scrollTop
            vant_wrap.style.height=`44px`
        }else{
           vant_wrap.style.opacity=`1`
            this.num=1
             vant_wrap.style.height=`44px`
        }
               
      } else if(evt.target.scrollTop-this.oldtop<0&&evt.target.scrollTop<50) {
            
              if( this.num>0){
                vant_wrap.style.height=`0`
               this.num=0
                vant_wrap.style.opacity=`${this.num}`
                 this.oldtop=evt.target.scrollTop
                 
            }
      }
       let isBot = evt.target.scrollHeight < (evt.target.offsetHeight + evt.target.scrollTop + 20)
               
                if (isBot && this.hasMore && !this.loading) {
                    this.loading = true
                    this.getmore()
                }
    },
    onChange(index) {
      this.current = index;
    },
    time(){
      let str = new Date()
      return str
    },
    addcart(){
      if(this.isAdd){
       let obj={
        id:this.list.id,
        name:this.list.title,
        price:this.list.price,
        image:this.list.photo[0].url
      }
      this.$store.commit('welfareah/setgoods',obj)  
      this.isAdd = false
      this.cartext = '已加入购物车'
      }else{
        return
      }
     
    }
  },
};
</script>
<style lang="less">
.van-tabs__wrap{
  position: absolute;
   opacity: 0 ;
   height: 0;
}
.addactive{
  background: rgb(241, 174, 30);
  flex: 1;
  height: 36px;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  line-height: 36px;
  font-size: 0.75rem;

}
.wrap {
 
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(235, 233, 233);
  header {
    justify-content: space-around;
    padding: 10px 10px;
    height: 50px;
    width: 100%;
    display: flex;
    background:#fff;
    align-content: center;
    .back {
      align-self: center;
      font-size: 1.2rem;
    }
    .search {
      display: flex;
      width: 250px;
      height: 28px;
      border: 1px solid #ccc;
      border-radius: 20px;
      padding: 2px 10px;
      align-items: center;

      img {
        width: 24px;
        height: 24px;
      }
      input {
        font-size: 0.7rem;
        color: #000;
        width: 0;
        flex: 1;
        border: none;
        background: transparent;
      }
    }
    .btn {
      align-self: center;
      width: 50px;
      font-size: 0.6rem;
      height: 24px;
      padding: 2px 5px;
      line-height: 20px;
      border-radius: 20px;
      background: rgb(247, 82, 32);
      text-align: center;
      color: #fff;
    }
  }
  main {
    overflow-y: auto;
    flex: 1;
    .van-tabs__wrap {
      width: 100%;
      padding-left: 50px;
      background: #fff;
      padding-right: 50px;
    }
    .tab {
      height: 35px;
    }
    .product {
     
      // background: #ccc;
     
      .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      color: #fff;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
      
    }
  .introduce{
      display: flex;
      flex-direction: column;
      height:115px;
      background: #fff;
      padding: 10px;
      .pricebox{
          display: flex;
          align-items: flex-end;
          height: 30px;
          .price{
              color: red;
              font-size:1rem ;
              line-height: 30px;
              &::before{
                  content: '￥';
                  color: red;
                  font-size: 0.7rem;
              }
          }
          .original{
              color: #ccc;
              text-decoration: line-through;
              font-size: 0.6rem;
              margin-left: 15px;
               line-height: 30px;
          }

      }
      .title{
          font-size: 0.75rem;
      }
      .mail{
          display: flex;
          justify-content: space-between;
          color: #ccc;
          font-size: 0.65rem;
          margin-top: 5px;
          .mailnum{

          }
      }
  }
  .select{
     margin-top: 10px;
      display: flex;
      flex-direction: column;
      font-size: 0.65rem;
      padding: 5px 10px;
      background: #fff;
      >div{
          align-items: center;
          height: 40px;
          display: flex;
          justify-content: space-between;
          strong{
              margin-right: 10px;
          }
          em{
              font-style: normal;
              color: red;
          }
      }
      .distribution{
          border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
      }
      .service .srtong{
          span{
              margin-right: 8px;
          }
          i{
              margin-right: 2px;
          }
      }
  }
  .evaluation{
         margin-top: 10px;
      display: flex;
      flex-direction: column;
      font-size: 0.65rem;
      padding: 5px 10px;
      background: #fff;
      border-bottom:1px solid #ccc ;
     
      .titles{
        display: flex;
        justify-content: space-between;
         align-items: center;
        .usertit{
        display: flex;
           align-items: center;
           font-size: 0.7rem;
          i{
            height: 15px;
            width: 5px;
            background: red;
            margin-right: 5px;
          }
      }
      }
      .label{
        margin-top: 10px;
        display: flex;
        .btn{
            height: 25px;
            background: pink;
            border-radius: 20px;
            padding: 5px 10px;
            font-size: 0.6rem;
            margin-right: 10px;
        }
      }
       .head{
    display: flex;
    align-items: center;
    margin: 10px 0;
    .headimg{
       width: 30px;
       height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        border: 1px #ccc solid;
        img{
            display: block;
            width: 100%;
            height: 100%;
       }
    }
    span{
      margin-right: 10px;
    }
    .star{
      color: red;
    }
     } 
     .date{
    display: flex;
    margin: 6px 0;
    .time{
      margin-right: 10px;
    }
     }
  .content{
    margin-bottom: 5px;
      }
  }
 
 
    }
    .xq {
      
      // height: 800px;
      // background: #ccc;
      padding-top: 10px;
      .title{
        
          font-size: 0.7rem;
          text-align: center;
          height: 40px;
          background-color: #fff;
          line-height: 40px;
          span{
            color: #ccc;
          }
      }
      .imgbox{
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        background: #fff;
      }
      .buytips{
          background: #fff;
        padding: 0 10px;
        img{
          width: 100%;
        }
      }
      .hot{
        .hottitle{
          font-size: 0.7rem;
          text-align: center;
          height: 40px;
          // background-color: #fff;
          line-height: 40px;
          span{
            color: #ccc;
          }
        }
        .goodscon{
          display: flex;
          padding: 0 10px;
          flex-wrap: wrap;
          justify-content: space-between;
          .item{
                width: 49%;
                background: #fff;
                margin-bottom: 10px;
                padding-bottom: 10px;
                .goodsimg{
                  width: 100%;
                  height: 160px;
                  img{
                    display: block;
                     width: 100%;
                    height: 100%;
                    border: none;
                  }
                }
                .cont{
                  padding: 0 10px;
                  span{
                    font-size: 0.6rem;
                  }
                  .goodstitle{
                    margin: 6px 0;
                  font-size: 0.7rem;
                  line-height: 22px;
                  -webkit-line-clamp:2;
                  display: -webkit-box;
                  -webkit-box-orient:vertical;
                  overflow:hidden;
                  text-overflow: ellipsis;
                }
                .mail{
                  color: #ccc;
                  font-size: 0.5rem;

                }
                .hotprice{
                  color: red;
                }
                .originPrice{
                  color: #ccc;
                  font-size: 0.65rem;
                  text-decoration: line-through;
                }
                }
                
          }
        }
        .loading{
          text-align: center;
          font-size: 0.7rem;
          line-height: 40px;
        }
      }
    }
  }
  footer {
    .footernav{
      display: flex;
      align-items: center;
      height: 50px;
      padding: 4px 10px;
      background-color: #fff;
      span{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.6rem;
       margin-right: 15px;
       .icon{
         font-size: 1.2rem;
       }
       p{
         margin: 0;
       }
      }
      .adddcart{
      flex: 1;
     
      height: 36px;
      color: #fff;
      border-radius: 20px;
      background: rgb(245, 60, 60);
      text-align: center;
      line-height: 36px;
      font-size: 0.75rem;

      }
    }
  }
}
</style>